

<script setup>
import {getcitylist} from "../../../api/city";
import {ref} from "vue";
import { onMounted, onUnmounted } from 'vue';
import {useRouter} from "vue-router";
const router = useRouter();

function sleep(ms) {
  console.log('暂停')
  return new Promise(resolve => setTimeout(resolve, ms));
}

let city_landing = ref(false)
let city_list = ref([])
let hot_city = ref([])
let city_list_info = ref([])
let selectCityInfo=ref({
  cityId:0,
  cityName:''
})
function selectCity(cityId,cityName){
  showSuccessToast(`${cityId}:${cityName}`);
  setcache(cityId,cityName)
  router.push({
    path:'/'
  })
}
function setcache(cityId,cityName){
  window.localStorage.setItem('cityId',cityId)
  window.localStorage.setItem('cityName',cityName)
}
function gotocity  (types) {
 router.push({
   path:'/'
 })

}


async  function getcitylistdata(){
  let pardata  = {
    'k': 7636500,
  }
  city_landing.value = true
  let citylistdata = await getcitylist(pardata)
  city_list_info.value = citylistdata.data.data.cities
  if (city_list.value.length<city_list_info.value.length){
    for (let  i = 0; i < 100; i++){
      city_list.value.push(city_list_info.value[i])
      if (city_list_info.value[i].name ==='成都' || city_list_info.value[i].name ==='重庆'){
        hot_city.value.push(city_list_info.value[i])
      }
      if (city_list_info.value[i].isHot ===1){
        hot_city.value.push(city_list_info.value[i])
      }
    }
    await sleep(500);
    for (let  i = 100; i < 200; i++){
      city_list.value.push(city_list_info.value[i])
      if (city_list_info.value[i].name ==='成都' || city_list_info.value[i].name ==='重庆'){
        hot_city.value.push(city_list_info.value[i])
      }
      if (city_list_info.value[i].isHot ===1){
        hot_city.value.push(city_list_info.value[i])
      }
    }
    await sleep(500);
    for (let  i = 200; i < city_list_info.value.length; i++){
      city_list.value.push(city_list_info.value[i])
      if (city_list_info.value[i].name ==='成都' || city_list_info.value[i].name ==='重庆'){
        hot_city.value.push(city_list_info.value[i])
      }
      if (city_list_info.value[i].isHot ===1){
        hot_city.value.push(city_list_info.value[i])
      }
    }
  }
  city_landing.value = false
  console.log(JSON.stringify(city_list))
  console.log(JSON.stringify(hot_city))
}
onMounted(()=>{
  getcitylistdata()
})
</script>


<template>
  <van-overlay class="overlay" :show="city_landing" z-index="3" >
    <div class="block">
      <van-loading color="#0094ff" text-color="#0094ff" size="24px" vertical>加载中...</van-loading>
    </div>

  </van-overlay>
  <div class="city-body">

    <div class="top-box"></div>
    <div class="city-header">
      <van-nav-bar class="city-header-title" title="当前定位城市"  @click-left="gotocity">
        <template #left>
          <van-icon name="cross" size="20" color="#6f7070" />
        </template>
      </van-nav-bar>
      <div class="city-search">
        <div class="search-box">
          <van-icon color="#797d82" class="search-box-icon" name="search" />
          <input type="text" placeholder="输入城市名或拼音"/>
        </div>
      </div>
    </div>

    <div class="city-content">
      <div class="city-location">
        <span> GPS定位你所在的城市</span>
        <ul>
          <li>
            <div>{{ selectCityInfo.cityName?selectCityInfo.cityName:'请选择城市' }}</div>
          </li>
        </ul>
      </div>


      <div v-show="city_landing===false" class="hot-city-box">
        <span> 热门城市</span>
        <div class="van-row-box">
          <van-row  justify="center" :gutter="[6, 5]">
            <van-col  v-for="(item,index) in hot_city" :key="item"  @click="selectCity(item.cityId,item.name)" span="7"><div class="hot-city-name">{{item.name}}</div></van-col>
          </van-row>
        </div>
      </div>


      <div  class="city-list">
        <van-list
            v-model:loading="city_landing"
            :finished="city_list"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <van-cell v-for="(item,index) in city_list" :key="item" :title="item.name" @click="selectCity(item.cityId,item.name)" />
        </van-list>
      </div>
    </div>
  </div>
</template>

<style scoped src="../css/style.css">

</style>